<template>
	<div class="check-self-data">
		<van-tabs v-model:active="tabState.active" animated sticky swipeable>
			<van-tab v-for="item in tabState.list" :title="item.title" :name="item.value" :key="item.value">
				<component
					:is="buildingDetail"
					v-if="+tabState.active === 1"
					:baseData="data?.baseData"
					:collectionData="data?.collectionData"
				/>
				<component
					:is="checkDataDetail"
					v-if="+tabState.active === 2"
					:detail="data?.checkData"
				/>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script setup>
import { buildingBase, buildingCheckSelf } from '@/service/village'
import { onMounted, reactive } from 'vue'
import buildingDetail from './components/buildingDetail'
import checkDataDetail from './components/checkDataDetail'
import { useRoute } from 'vue-router'

const route = useRoute()
const tabState = reactive({
	active: 1,
	list: [
		{ title: '房屋信息', value: 1 },
		{ title: '自查信息', value: 2 },
	]
})

const booleanKey = [
	'wdwhjgfjgqsyyrkrgbdj',
	'sstdsyyrkrclzx',
	'gryssdcsszblyyqksddp',
	'cjzwqtjyyt',
]
const booleanEnum = {
	1: '是',
	0: '否'
}

const data = reactive({
	baseData: {},
	collectionData: {},
	checkData: {}
})

const getBase = async () => {
	const result = await buildingBase({
		fwbh: route.query.fwbh
	})
	data.baseData = {
		...result?.data,
		region: `${result?.data?.xzqdmAlias}-${result?.data?.townAlias}-${result?.data?.villageAlias}`
	}
}

const getCheck = async () => {
	const result = await buildingCheckSelf({
		fwbh: route.query.fwbh
	})
	if (result?.succ) {
		data.checkData = result?.data?.zmPcYh || {}
		data.collectionData = result?.data?.zmPcBase || {}
		booleanKey.map(item => {
			data.collectionData[item] = booleanEnum[result?.data?.zmPcBase?.[item]]
		})
	}
}

onMounted(() => {
	getBase()
	getCheck()
})
</script>

<style scoped lang="less">
.check-self-data {

}
</style>
